<template>
    <d2-container class="page">
        <div slot="header" class="">
            {{ $t('page.system.name') }}
        </div>
        <s-page-cover flex="dir:top">
            <div flex-box="1" class="box d2-mb">
                <div flex="dir:left">
                    <div flex-box="1" class="d2-ml-10 d2-mr-10">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>{{ $t('views.system.index.panel.radar') }}</span>
                                <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
                            </div>
                            <div class="text item d2-text-center">
                                <d2-count-up :end="dashboardInfo.lidars"/>
                            </div>
                        </el-card>
                    </div>
                    <div flex-box="1" class="d2-ml-10 d2-mr-10">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>{{ $t('views.system.index.panel.abnormal') }}</span>
                                <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
                            </div>
                            <div class="text item d2-text-center">
                                <d2-count-up :end="dashboardInfo.abnormals"/>
                            </div>
                        </el-card>
                    </div>
                    <div flex-box="1" class="d2-ml-10 d2-mr-10">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>{{ $t('views.system.index.panel.total') }}</span>
                                <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
                            </div>
                            <div class="text item d2-text-center">
                                <d2-count-up :end="dashboardInfo.objs"/>
                            </div>
                        </el-card>
                    </div>
                </div>
            </div>
            <div flex-box="1" class="box">
                <div flex="dir:left">
                    <div flex-box="1">
                        <div class="d2-mb">
                            <el-date-picker
                                v-model="chartDate"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                :start-placeholder="$t('page.system.date.start')"
                                :end-placeholder="$t('page.system.date.end')">
                            </el-date-picker>
                            <el-button type="primary" @click="getObjtypechat" class="d2-ml-10">{{ $t('page.system.button.search') }}</el-button>
                        </div>
                        <!--<ve-histogram :data="chartData"></ve-histogram>-->
                        <ve-line :data="chartData"></ve-line>
                    </div>
                </div>
            </div>
        </s-page-cover>
        <div slot="footer" class="d2-text-center">
            Copyright
            <d2-icon name="copyright"/>
            {{dayjs().year()}}
            <el-divider direction="vertical"></el-divider>
            {{$title}} {{$version}}
        </div>
    </d2-container>
</template>

<script>
    import {menuAside} from "@/menu";
    import {mapActions} from "vuex";
    import dayjs from 'dayjs'
    export default {
        name: 'home',
        components: {
            sPageCover: () => import('./components/s-page-cover')
        },
        data() {
            return {
                dayjs,
                chartDate: [
                    dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
                    dayjs().format('YYYY-MM-DD')
                ],
                chartData: {
                    columns: [],
                    rows: []
                },
                dashboardInfo: {},
            }
        },
        mounted() {
            // this.setThemeColor()
            this.getInfo()
            this.getObjtypechat();
        },
        methods: {
            ...mapActions('d2admin/color', [
                'set'
            ]),
            setThemeColor() {
                this.set('#C71585')
            },

            getInfo() {
                this.$api.V2X_DASHBOARD_GET().then(res=> {
                    // console.log(res)
                    this.dashboardInfo = res
                });
            },
            getObjtypechat() {
                if (this.chartDate == null) {
                    return false
                }
                this.$api.V2X_OBJTYPECHAT_GET({
                    // date: dayjs().subtract(1, 'month').format('YYYY-MM-DD') + ',' + dayjs().format('YYYY-MM-DD')
                    date: this.chartDate
                }).then(res=> {
                    // console.log(res.data)
                    this.chartData = res.data
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        .box{
            width: 100%;
        }
    }
    .text {
        font-size: 28px;
        font-weight: bold;
    }
    .item {
        margin-bottom: 18px;
    }
    .clearfix{
        font-size: 14px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
</style>
